<template>
  <div class="know">
    <div class="inputArea">
      <el-input
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 10 }"
        placeholder="请输入待抽取的句子"
        v-model="input"
        clearable
      >
      </el-input>
      <el-button type="primary" @click="query" style="width: 100%; margin: 20px 0;">知识抽取</el-button>
      <el-input
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 10 }"
        placeholder="等待输出..."
        v-model="output"
        clearable
        disabled
      >
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: "",
      output: ""
    };
  },
  methods: {
    query () {
      console.log(this.input);
      if (this.input === "") {
        return;
      }
      var _this = this;
      var url = "http://localhost:8081/know?text=" + this.input;
      this.$axios.get(url).then((res) => {
        // var resData = res.data
        console.log(res.data);
        var resData = [];
        for (let i = 0; i < res.data.re_result.vis_data.length; ++i) {
          resData.push({
            entityPosition: res.data.re_result.vis_data[i].entity,
            result: res.data.re_result.vis_data[i].result
          });
        }
        console.log(resData);
        _this.output = {
          sent: res.data.text,
          sigment: res.data.ner_result.sent,
          NER: res.data.ner_result.label_output,
          RE: resData
        };
        _this.output = JSON.stringify(_this.output);
        // _this.output = {
        // }
        // _this.output = JSON.stringify(res.data)
      });
    }
  }
};
</script>

<style>
    .know {
        margin-top: 40px;
    }
</style>
